<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
  <title>Document</title>
</head>

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" />

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
<script src="resource/js/flexible.js"></script>
<style>
  #app {
    background-color: #f7f8fd;
  }

  .form-box {
    padding: 0.24rem 0.3rem;
    /* background: #fff url(../img/box-bg.png) no-repeat right top; */
    background: #fff;
    background-size: 100%;
    border-radius: 0.2rem;
    margin: 0.3rem;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
  }
</style>

<body>
  <div>
    <div id="app">
      <van-form >
        <van-tabs >
          <van-tab name="个人客户" title="个人客户"></van-tab>
          <van-tab name="公司客户" title="公司客户"></van-tab>
        </van-tabs>
        <van-field v-model="customName" name="客户名称" label="客户名称" placeholder="客户名称"></van-field>
        <van-field v-model="contact" name="联系人" label="联系人" placeholder="联系人"></van-field>
        <van-field v-model="phone" name="联系电话" label="联系电话" placeholder="联系电话"></van-field>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            客户验证
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          customName: '',
          contact: '',
          phone: '',
          activeName: '',
        };
      },
      methods: {
        onSubmit(values) {
          console.log('submit', values);
        },
      },
    })
    app.use(vant);
    app.mount('#app');
  </script>
</body>

</html>